<template>
  <view>
    <view
      v-if="isShow"
      class="time_mask"
      :class="{ 'uni-timer-mask-show': maskShow }"
      @click="close"
    />
    <view v-if="isShow" class="yx_time_slot" :class="{ fadelogIn1: maskShow }">
      <view class="time_top_box">
        <view class="time_close" @click="close">取消</view>
        <view class="time_text">{{ title }}</view>
        <view class="time_comfirm" @click="confirm">确认</view>
      </view>
      <view class="typelist">
        <view
          v-for="(item, index) in typeList"
          :key="index"
          class="typeobj"
          :class="{ typeobj_hover: typeIndex == index }"
          @click="handleType(index)"
        >
          <view class="text">{{ item }}</view>
          <view class="line"></view>
        </view>
      </view>
      <!-- 时间选择 -->
      <view class="yx_timer_sel">
        <swiper class="sel_swiper" :current="typeIndex" @change="swiperChange">
          <swiper-item>
            <view>
              <picker-view
                :value="startvalue"
                :indicator-style="{
                  height: lineHeight,
                }"
                class="sel_swiper-item"
                @change="bindstartChange"
              >
                <picker-view-column>
                  <view class="item" v-for="(item, index) in timeHour" :key="index">
                    {{ item }}时
                  </view>
                </picker-view-column>
                <picker-view-column>
                  <view class="item" v-for="(item, index) in timeMin" :key="index">
                    {{ item }}分
                  </view>
                </picker-view-column>
              </picker-view>
            </view>
          </swiper-item>
          <swiper-item>
            <view>
              <picker-view
                :value="endvalue"
                :indicator-style="{
                  height: lineHeight,
                }"
                class="sel_swiper-item"
                @change="bindendChange"
              >
                <picker-view-column>
                  <view class="item" v-for="(item, index) in timeHour" :key="index">
                    {{ item }}时
                  </view>
                </picker-view-column>
                <picker-view-column>
                  <view class="item" v-for="(item, index) in timeMin" :key="index">
                    {{ item }}分
                  </view>
                </picker-view-column>
              </picker-view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "times",
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 开始时间 格式00:00
    startTime: {
      type: String,
      default: "",
    },
    // 结束时间 格式00:00
    endTime: {
      type: String,
      default: "",
    },
    // 选项高度
    lineHeight: {
      type: String,
      default: "50px",
    },
  },
  data() {
    return {
      maskShow: false, //遮罩
      isShow: false, //显示
      typeList: ["开始时间", "结束时间"],
      typeIndex: 0, //下标
      startvalue: [0, 0], //默认下标
      endvalue: [0, 0], //默认下标
      timeHour: [], // 小时列表
      timeMin: [], //分钟列表
    };
  },
  mounted() {
    //获取时分
    let timeHour = [];
    let timeMin = [];
    for (let i = 0; i < 24; i++) {
      timeHour.push(this.formatNumber(i));
    }
    for (let i = 0; i < 60; i++) {
      timeMin.push(this.formatNumber(i));
    }
    this.timeHour = timeHour;
    this.timeMin = timeMin;
  },
  methods: {
    // 看看是不是有两位数
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },
    // 开始选择
    bindstartChange(e) {
      this.startvalue = e.detail.value;
    },
    // 结束选择
    bindendChange(e) {
      this.endvalue = e.detail.value;
    },
    // 关闭弹窗
    close() {
      this.maskShow = false;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isShow = false;
          this.$emit("close");
        }, 300);
      });
    },
    // 切换swiper
    swiperChange(e) {
      this.typeIndex = e.detail.current;
    },
    // 确认按钮
    confirm() {
      if (this.typeIndex == 0) {
        this.endvalue = [Number(this.startvalue[0]) + 1, 0];
        this.typeIndex = 1;
      } else {
        if (
          this.startvalue[0] < this.endvalue[0] ||
          (this.startvalue[0] == this.endvalue[0] &&
            this.startvalue[1] < this.endvalue[1])
        ) {
          if (this.endvalue[0] > 23) {
            this.endvalue[0] = 23;
            this.endvalue[1] = 59;
          }
          var obj = {
            start: {
              hour: this.timeHour[Number(this.startvalue[0])],
              min: this.timeMin[Number(this.startvalue[1])],
            },
            end: {
              hour: this.timeHour[Number(this.endvalue[0])],
              min: this.timeMin[Number(this.endvalue[1])],
            },
          };
          this.$emit("confirm", obj);
          this.close();
        } else {
          uni.showToast({
            title: "结束时间要大于开始时间",
            icon: "none",
          });
        }
      }
    },
    // 打开日历弹窗
    open() {
      this.typeIndex = 0;
      this.isShow = true;
      this.$nextTick(() => {
        this.getDefault();
        setTimeout(() => {
          this.maskShow = true;
        }, 50);
      });
    },
    // 获取默认时间
    getDefault() {
      let date = new Date();
      let h = date.getHours();
      let m = date.getMinutes();
      if (this.startTime) {
        this.startvalue = this.startTime.split(":");
      } else {
        this.startvalue = [h, m];
      }
      if (this.endTime) {
        this.endvalue = this.endTime.split(":");
      } else {
        this.endvalue = [h, m];
      }
    },
    // 栏目选择
    handleType(index) {
      if (index != this.typeIndex) {
        this.typeIndex = index;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.time_mask {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background-color: $uni-bg-color-mask;
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 0;
  /* #ifndef APP-NVUE */
  z-index: 99;
  /* #endif */
}
.yx_time_slot {
  background-color: #ffffff;
  width: 100%;
  height: 750rpx;
  position: fixed;
  bottom: calc(var(--window-bottom));
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 20rpx 20rpx 0 0;
  transition-property: transform;
  transition-duration: 0.3s;
  transform: translateY(460px);
  .time_top_box {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time_close,
    .time_comfirm {
      width: 100rpx;
      color: #999999;
      font-size: 28rpx;
      font-weight: 400;
      text-align: center;
    }
    .time_comfirm {
      color: #4360f7;
    }
    .time_text {
      flex: 1;
      font-size: 30rpx;
      font-weight: 800;
      text-align: center;
    }
  }
}
.uni-timer-mask-show {
  opacity: 1;
}
/* 从下往上弹窗动画 */
.fadelogIn1 {
  // -webkit-animation: fadelogIn 0.5s;
  // animation: fadelogIn 0.5s;
  transform: translateY(0);
}
.typelist {
  width: 100%;
  height: 70rpx;
  display: flex;
  align-items: center;
  .typeobj {
    width: 158rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .text {
      height: 65rpx;
      line-height: 65rpx;
      font-size: 28rpx;
      color: #333333;
    }
    .line {
      width: 1rpx;
      height: 5rpx;
    }
  }
  .typeobj_hover {
    .text {
      font-weight: 600;
    }
    .line {
      width: 88rpx;
      transition: width 0.5s;
      background-color: #4360f7;
    }
  }
}
.yx_timer_sel {
  width: 100%;
  margin-top: 38rpx;
  .sel_swiper {
    height: 500rpx;
  }
  .sel_swiper-item {
    height: 500rpx;
    .item {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }
}
</style>
